<template>
	<view>
		<view class="head-body">
			<uni-section title="异常图片管理" type="line" titleFontSize="20px">
				<uni-row class="demo-uni-row" :width="nvueWidth">
					<uni-col :span="4">
						<view class="gd-text">SN号:</view>
					</uni-col>
					<uni-col :span="14">
						<uni-easyinput  focus trim="all" v-model="SN" @change="onChange" placeholder=""></uni-easyinput>
					</uni-col>
					<uni-col :span="6">
						<yt-scanCode btnName="扫码" style="margin-left: 18%;margin-top: 3px;"
							@getScanCode="OnScanningCode"></yt-scanCode>
					</uni-col>
				</uni-row>
				<uni-row class="demo-uni-row" :width="nvueWidth">
					<uni-col :span="4">
						<view class="gd-text">工序:</view>
					</uni-col>
					<uni-col :span="19 ">
						<uni-data-select v-model="jobCode" :localdata="range" @change="change"></uni-data-select>
					</uni-col>
				</uni-row>
			</uni-section>
			<view style="border-top: 1px solid #cecece; margin-top: 30px;">
			</view>
			<uni-section title="异常列表" type="line" titleFontSize="20px">
				<uni-card>
					<view style="height:58vh">
						<zb-table :columns="column" :stripe="true" :border="true" :data="data" :cell-style="cellStyle"
							@rowClick="rowClick"></zb-table>
					</view>
				</uni-card>
			</uni-section>
		</view>
		<sl-pda-employ :config="pdaConfig"></sl-pda-employ>
	</view>
</template>

<script>
	import {
		queryProcBySN,
		queryAbnormalBySN
	} from '@/api/system/inspect'
	import slPdaEmploy, {
		initPdaScan,
		manualTrigScan,
		onUnloadPdaScan,
		BroadcastConfig
	} from '../../uni_modules/sl-pdaEmploy'
	export default {
		data() {
			return {
				pdaConfig: { // 可以抽离出去管理这个配置
					BroadcastAction: 'nantong',
					BroadcastLabelKey: 'data',
					//BroadcastTriglKey: 'com.scan.onStartScan',
				},
				nvueWidth: uni.getWindowInfo().screenWidth,
				SN: "",
				jobCode: "",
				range: [{
					value: "",
					text: "全部"
				}], // 
				data: [],
				column: [{
						label: '序号',
						type: 'index',
						align: "center",
						width: uni.getWindowInfo().screenWidth / 10 * 1.1
					},
					{
						name: 'JOB_NAME',
						label: '工序',
						fixed: true,
						align: "center",
						width: uni.getWindowInfo().screenWidth / 100 * 20
					},
					{
						name: 'REMARK',
						label: '实测描述',
						width: uni.getWindowInfo().screenWidth / 100 * 47
					},
					{
						name: 'FILE_COUNT',
						label: '操作',
						align: "center",
						width: uni.getWindowInfo().screenWidth / 100 * 20
					},
					// {
					// 	name: 'operation',
					// 	type: 'operation',
					// 	label: '操作',
					// 	align: "center",
					// 	width: uni.getWindowInfo().screenWidth / 100 * 17,
					// 	renders: [{
					// 		name: '附件',
					// 		class: 'edit',
					// 		type: "primary",
					// 		func: 'edit',
					// 	}, ]
					// },

					// {
					// 	name: 'reciveNum',
					// 	label: '提交人',
					// 	align: "center",
					// 	width: uni.getWindowInfo().screenWidth / 100 * 20
					// },
					// {
					// 	name: 'reciveNum',
					// 	label: '提交时间',
					// 	align: "center",
					// 	width: uni.getWindowInfo().screenWidth / 100 * 20
					// },

				],

			}
		},
		components: {
			slPdaEmploy
		},
		onShow() {
			if (this.SN !== "") {
				queryAbnormalBySN(this.SN, this.jobCode).then(res => {
					console.log(res)
					this.data = res.data;
					console.log(data)
				})
			}	
		},
		onLoad() {
			initPdaScan(code => {
				this.clear();
				this.SN = code;
				queryAbnormalBySN(this.SN, "").then(res => {
					console.log(res)
					this.data = res.data;
					console.log(data)
				})
				queryProcBySN(this.SN).then(res => {
					console.log(res)
					if (res.code == 200) {
						for (var i = 0; i < res.data.length; i++) {
							let a = {
								value: res.data[i].jobCode,
								text: res.data[i].jobName
							};
							this.range.push(a)
						}
					} else {
						uni.showToast({
							title: "未查询匹配到sn:" + code,
							icon: "none",
							duration: 5000
						})
					}
				})
			})
		},
		onUnload() {
			onUnloadPdaScan()
		},
		methods: {
			cellStyle({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if (columnIndex === 3) {
					return {
						color: '#0000fff2'
					}
				}
			},
			onChange(code) {
				this.clear();
				this.SN = code;
				if(this.SN!==""){
					queryAbnormalBySN(this.SN, "").then(res => {
						console.log(res)
						this.data = res.data;
						console.log(data)
					})
					queryProcBySN(this.SN).then(res => {
						if (res.code == 200) {
							for (var i = 0; i < res.data.length; i++) {
								let a = {
									value: res.data[i].jobCode,
									text: res.data[i].jobName
								};
								this.range.push(a)
							}
						} else {
							uni.showToast({
								title: "未查询匹配到sn:" + code,
								icon: "none",
								duration: 5000
							})
						}
					})
				}
			},
			OnScanningCode(code) {
				this.clear();
				this.SN = code;
				queryAbnormalBySN(this.SN, "").then(res => {
					console.log(res)
					this.data = res.data;
					console.log(data)
				})
				queryProcBySN(this.SN).then(res => {
					if (res.code == 200) {
						for (var i = 0; i < res.data.length; i++) {
							let a = {
								value: res.data[i].jobCode,
								text: res.data[i].jobName
							};
							this.range.push(a)
						}
					} else {
						uni.showToast({
							title: "未查询匹配到sn:" + code,
							icon: "none",
							duration: 5000
						})
					}
				})
			},
			change(e) {
				if (this.SN !== "") {
					queryAbnormalBySN(this.SN, e).then(res => {
						console.log(res)
						this.data = res.data;
						console.log(data)
					})
				}
			},
			clear() {
				this.SN = "";
				this.jobCode = "";
				this.range = [{
					value: "",
					text: "全部"
				}]; // { value: 0, text: "篮球" }
				this.data = [];
			},
			rowClick(row, index) {
				uni.navigateTo({
					url: '/pages/inspect/picture?data=' + JSON.stringify(row),
				})
			},

		}
	}
</script>

<style lang="scss">
	.head-top {
		height: 10vh;
	}

	.head-top-row {
		background-color: #007AFF;
		display: flex;
		height: 6vh;
	}

	.head-top-row-left {
		padding-top: 0.5vh;
		font-size: 19px;
		font-weight: 500;
		width: 86%;
	}

	.head-top-row-left-text {
		padding-left: 30%;
		color: #ffffff;
	}

	.head-top-row-right {
		color: #ffffff;
		margin-left: 2%;
		width: 14%;
		font-size: 17px;
		font-weight: 500;
		padding-top: 1vh;
	}

	.head-body {
		background-color: #ffffff;
		height: 90vh;
	}

	.demo-uni-row {
		padding-left: 10px;
		margin-top: 6px;
	}

	.gd-text {
		font-size: 17px;
		margin-top: 4px;
		float: right;
		margin-right: 6px;
	}

	::v-deep {
		.uni-card {
			margin: 1% !important;
			padding: 0 !important;

			.uni-card__content {
				padding: 0 !important;
			}
		}
	}

	.getScanCode {
		margin-right: 4px;
		margin-top: 10px;
	}

	::v-deep .is-disabled {
		color: black !important;
	}

	.triangle-facing-left {
		display: inline-block;
		border-left: 1px solid;
		border-bottom: 1px solid;
		width: 12px;
		height: 12px;
		transform: rotate(45deg);
	}
</style>